<!DOCTYPE HTML>

<head>
    <title>天地图与广西行政区</title>
    <link href="ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="ol/ol.js" type="text/javascript"></script>
    <style type="text/css">
        .map {
            width: 100%;
            height: 95%;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="map" class="map">
    </div>
    <script type="text/javascript">
        var tian_di_tu_road_layer;
        var tian_di_tu_annotation;

        var map = new ol.Map({
            layers: [
                               
            ],
            target: 'map',
            view: new ol.View({
                center: ol.proj.fromLonLat([107.41, 37.82]),
                zoom: 5,
                maxZoom: 18,
                minZoom: 4
            })

        });
        tian_di_tu_road_layer = new ol.layer.Tile({
            title: "天地图路网",
            source: new ol.source.XYZ({
                url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=42dca576db031641be0524ee977ddd04"
            })
        });
        map.addLayer(tian_di_tu_road_layer);
        tian_di_tu_annotation = new ol.layer.Tile({
            title:"天地图文字注记",
            source: new ol.source.XYZ({
                url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=42dca576db031641be0524ee977ddd04"
            })
        });
        map.addLayer(tian_di_tu_annotation);

    </script>

</body>

</html>